<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <!--  <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> -->
    <style>
        body {
            background-color: #f1f1f1;
            font-family: Arial, sans-serif;
            padding: 40px 0;
        }

        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            max-width: 420px;
            margin: 0 auto;
        }

        h2 {
            font-size: 24px;
            margin-bottom: 30px;
            text-align: center;
            color: #333;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 100px;
            font-weight: normal;
            font-size: 14px;
            color: #555;
        }

        .layui-input {
            width: 100%;
            height: 40px;
            padding: 0 10px;
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            font-size: 14px;
        }

        .layui-btn {
            width: 100%;
            height: 40px;
            background-color: #4CAF50;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .layui-btn:hover {
            background-color: #45a049;
        }

        .switch-btn {
            text-align: center;
            margin-top: 15px;
        }

        .switch-btn a {
            color: #4CAF50;
            text-decoration: none;
            font-size: 14px;
        }

        .switch-btn a:hover {
            text-decoration: underline;
        }

        .result-message {
            color: red;
            text-align: center;
            font-size: 14px;
            margin-top: 10px;
        }

        .layui-form-item .layui-input-block {
            padding-left: 0;
            padding-right: 0;
        }
    </style>
</head>

<body>

    <div class="container" id="loginForm">
        <h2>登录</h2>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="loginUsername" name="username" required lay-verify="required"
                        placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="loginPassword" name="password" required lay-verify="required"
                        placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" id="loginBtn" class="layui-btn">登录</button>
            </div>
        </form>
        <div class="result-message" id="loginResult"></div>
        <div class="switch-btn">
            <a href="javascript:void(0)" id="switchToRegister">还没有账户？点击注册</a>
        </div>
    </div>

    <!-- 注册页面 -->
    <div class="container" id="registerForm" style="display: none;">
        <h2>注册</h2>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="registerUsername" name="username" required lay-verify="required"
                        placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="registerPassword" name="password" required lay-verify="required"
                        placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="registerName" name="name" required lay-verify="required" placeholder="请输入姓名"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="number" id="registerAge" name="age" required lay-verify="required" placeholder="请输入年龄"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" id="registerPhone" name="phone" required lay-verify="required|phone"
                        placeholder="请输入手机号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" id="registerEmail" name="email" required lay-verify="email" placeholder="请输入邮箱"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" id="registerBtn" class="layui-btn">注册</button>
            </div>
        </form>
        <div class="result-message" id="registerResult"></div>
        <div class="switch-btn">
            <a href="javascript:void(0)" id="switchToLogin">已有账户？点击登录</a>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            const form = layui.form;
            const layer = layui.layer;

            // 切换到注册界面
            document.getElementById('switchToRegister').addEventListener('click', function () {
                document.getElementById('loginForm').style.display = 'none';
                document.getElementById('registerForm').style.display = 'block';
            });

            // 切换到登录界面
            document.getElementById('switchToLogin').addEventListener('click', function () {
                document.getElementById('registerForm').style.display = 'none';
                document.getElementById('loginForm').style.display = 'block';
            });

            // 登录按钮点击事件
            document.getElementById('loginBtn').addEventListener('click', function () {
                const username = document.getElementById('loginUsername').value;
                const password = document.getElementById('loginPassword').value;

                fetch('http://localhost:8080/user/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },

                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                })
                    .then(response => response.json())
                    .then(result => {
                        console.log('服务器返回的完整数据:', result); // 调试日志

                        if (result.code === 0 && result.data) {
                            // 从 result.data 中获取用户信息
                            const userInfo = result.data;
                            console.log('用户信息:', userInfo); // 调试日志

                            // 存储用户信息到 sessionStorage
                            sessionStorage.setItem('username', userInfo.username);
                            sessionStorage.setItem('userInfo', JSON.stringify({
                                id: userInfo.id,
                                username: userInfo.username,
                                name: userInfo.name,
                                phone: userInfo.phone,
                                email: userInfo.email
                            }));

                            layer.msg(result.message || '登录成功', {
                                icon: 1,
                                time: 1000
                            }, function () {
                                window.location.href = 'home.html';
                            });
                        } else {
                            layer.msg(result.message || '登录失败', {
                                icon: 2
                            });
                        }
                    })
                    .catch(error => {
                        console.error('登录请求失败:', error);
                        layer.msg('登录失败：' + error.message, {
                            icon: 2
                        });
                    });
            });

            // 注册按钮点击事件
            document.getElementById('registerBtn').addEventListener('click', function () {
                const user = {
                    username: document.getElementById('registerUsername').value,
                    password: document.getElementById('registerPassword').value,
                    name: document.getElementById('registerName').value,
                    age: document.getElementById('registerAge').value,
                    phone: document.getElementById('registerPhone').value,
                    email: document.getElementById('registerEmail').value
                };

                // 表单验证
                if (user.password.length < 6) {
                    document.getElementById('registerResult').textContent = '密码长度必须在6位以上';
                    return;
                }

                // 手机号验证（简单示例）
                const phonePattern = /^[0-9]{11}$/;
                if (!phonePattern.test(user.phone)) {
                    document.getElementById('registerResult').textContent = '请输入有效的手机号';
                    return;
                }

                // 邮箱验证（简单示例）
                const emailPattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
                if (!emailPattern.test(user.email)) {
                    document.getElementById('registerResult').textContent = '请输入有效的邮箱地址';
                    return;
                }
                //获取注册数据
                fetch('http://localhost:8080/user/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(user)
                })
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('registerResult').textContent = data.message;
                        if (data.code === 0) { // 注册成功
                            layer.msg('注册成功，即将跳转到登录页面...', {
                                icon: 1,
                                time: 2000 //2秒后自动关闭
                            }, function () {
                                // 清空注册表单
                                document.getElementById('registerForm').reset();
                                // 切换到登录界面
                                document.getElementById('registerForm').style.display = 'none';
                                document.getElementById('loginForm').style.display = 'block';
                                // 自动填充用户名
                                document.getElementById('loginUsername').value = user.username;
                            });
                        }
                    })
                    .catch(error => console.error('Error:', error));
            });
        });
    </script>

</body>

</html>